<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开心小猪</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">*{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%;}</style>
	<script src="layer_mobile/layer.js"></script>

</head>

<body>
    <div id = "container" style="display:flex;justify-content:center" >
        <!-- <iframe width="100" height="100%" ></iframe> -->
		<img id="pig" src="pig.jpg" alt="Smiley face" style="display:none">
    </div>
</body>
    <script>
        window.onload = function() {
		  layer.open({
			content: '不要生气了嘛？'
			,btn: ['好的', '不好']
			,yes: function(index){
				ok();
				layer.close(index);
			}
			,no: function(index) {
				no();
				layer.close(index);
			}
		  });
        }
		
		function ok() {
			  //提示
			  layer.open({
				content: '开心。。。'
				,skin: 'msg'
				,time: 2 //2秒后自动关闭
			  });
			  //
			  document.getElementById('pig').style.display="block";
		}
		
		function no() {
		  layer.open({
			content: '那我请你吃饭赔礼道歉好不好？'
			,btn: ['接受', '拒绝']
			,yes: function(index){
				ok();
				layer.close(index);
			}
			,no: function(index) {
				no2();
				layer.close(index);				
			}
		  });
		
		function no2() {
		  layer.open({
			content: '不行，不能拒绝！'
			,btn: ['不拒绝', '返回上一层']
			,yes: function(index){
				ok();
				layer.close(index);
			}
			,no: function(index) {
				no();
				layer.close(index);
			}
		  });			
		}
		}
    </script>
</html>
